<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth" style="height: 100vh; background-color: #001529">
        <div style="height: 60px; color: white;display: flex; align-items: center; justify-content: center " >
          <img src="../assets/电信LOGO.jpeg" style="height: 40px; width: 40px" alt="">
          <transition name="el-fade-in">
            <span style="margin-left: 5px;font-size: 20px" v-show="!isCollapse">故障隐患记录</span>
          </transition>

        </div>

        <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none" :default-active="$route.path" router background-color="#001529"
        text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff">
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span slot="title">处理中心</span>
          </el-menu-item>
          <el-menu-item index="/element">
            <i class="el-icon-info"></i>
            <span slot="title">故障处理页面</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-info"></i>
            <span slot="title">故障处理页面</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item index="3-1">用户信息</el-menu-item>
            <el-menu-item index="3-2">角色管理</el-menu-item>
          </el-submenu>
        </el-menu>



      </el-aside>

      <el-container>
        <el-header>
          <i :class="CollapseIcon" style="font-size: 20px"  @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/element' }">故障处理</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0;display: flex; align-items: center; justify-content: flex-end">
            <el-dropdown placement="bottom">
              <div style="display: flex;align-items: center; cursor: default">
                <img src="../assets/电信LOGO.jpeg" alt="" style="width: 30px ; height: 30px;">
                <span class="el-dropdown-link">
                管理员<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              </div>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item disabled>修改密码</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-header>

        <el-main>
          <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            祝您开心每一天！
          </div>
          <div style="display: flex">
            <el-card style="width: 50%; margin-left: 10px;">
              <div slot="header" class="clearfix">
                <span>故障隐患记录</span>
              </div>
              <div>
                当前故障隐患有1条记录！请处理！
                <div style="margin-top: 20px">
                  <div style="margin: 10px 0"><strong>主题色</strong></div>
                  <el-button type="primary">按钮</el-button>
                  <el-button type="success">按钮</el-button>
                  <el-button type="warning">按钮</el-button>
                  <el-button type="danger">按钮</el-button>
                  <el-button type="info">按钮</el-button>
                </div>
              </div>
            </el-card>

            <el-card class="box-card" style="width: 50%;">
              <div slot="header" class="clearfix">
                <span>渲染用户的数据</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
              </div>
              <div>
                <el-table
                    :data="users"
                    style="width: 100%"
                    border=""
                    :header-cell-style="{background:'aliceblue',fontsize:'16px'}">
                  <el-table-column
                      prop="id"
                      label="ID"
                      width="90">
                  </el-table-column>
                  <el-table-column
                      prop="username"
                      label="用户名"
                      width="90">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="姓名">
                  </el-table-column>
                  <el-table-column
                      prop="address"
                      label="故障地址">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template v-slot="scope">
                      <el-button type="primary" @click="delete_this(scope.row)">清除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </el-container>


  </div>
</template>

<script>

import axios from "axios";
import request from "@/utils/request";
export default {
  name: 'HomeView',
  data(){
    return {
      isCollapse : false,
      asideWidth : "200px",
      CollapseIcon:"el-icon-s-fold",
      users:[],
    };

  },

  mounted() {  //页面加载完成之后触发
    //方式一 axios.get("http://localhost:9090/user/selectAll").then(res => {
    //   console.log(res);
    //   this.users = res.data.data;
    //   // res.data = {   // 数据格式
    //   //   code: '200',
    //   //   msg: '请求成功',
    //   //   data: {
    //   //
    //   //   }
    //   // }
    // })
    //方式二
    request.get("/user/selectAll").then(res => {
      this.users = res.data;
    })

  },
  methods: {
    handleCollapse(){
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '200px';
      this.CollapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    }
  }
}
</script>

<style>
.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-menu-item:hover , .el-submenu__title:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px;
}

.el-menu-item{
  height: 40px !important;
  line-height: 40px !important;

}

.el-submenu__title{
  height: 40px !important;
  line-height: 40px !important;

}

.el-aside{
  transition : width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}

.el-header{
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  display: flex;
  align-items: center;
}

</style>
